<template>
  <div class="comp-home-intro">
    <div class="title">
      <h1>{{intro.title}}</h1>
      <p>{{intro.desc}}</p>
    </div>
    <div class="content">
      <el-row :gutter="20">
        <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24" v-for="(item,index) in intro.list" :key="index">
          <router-link class="block" :to="item.url">
            <span class="iconfont" :class="[item.icon]"></span>
            <div>
              <h4>{{item.title}}</h4>
              <p>{{item.desc}}</p>
            </div>
          </router-link>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Object,
    default: () => { }
  }
})

const intro = props.data
</script>

<style lang="scss" scoped>
.comp-home-intro {
  .title {
    padding: 50px;
    text-align: center;
    h1 {
      font-size: 30px;
      color: #0059b2;
    }
    p {
      font-size: 18px;
      color: #999;
    }
  }
  .content {
    padding: 0 5%;
    .block {
      display: flex;
      align-items: center;
      color: #666;
      margin-bottom: 30px;
      .iconfont {
        font-size: 100px;
        color: #0059b2;
        margin-right: 10px;
      }
      h4 {
        font-size: 18px;
      }
      p{
        font-size: 16px;
      }
    }
  }
}
</style>